<template>
    <div>
    <el-row type="flex" style="margin-top:3%">
    <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
    <el-col :span="13">
        <el-form ref="form" :rules="formRules" :model="form" label-width="100px" label-position="left" :inline="true">
            <el-form-item label="标题" prop="title">
                <el-input v-model="form.title" placeholder="请输入标题，（建议14字以内，不超过30个字）" minlength="14" maxlength="30" style="width:550px">
                     <template slot="append">{{getInputLength(form.title)}}/30</template>
                </el-input>
            </el-form-item>
            <el-form-item label="作者" prop="author">
                <el-input v-model="form.author"  placeholder="请输入作者，（建议14字以内，不超过30个字）" minlength="14" maxlength="30" style="width:550px">
                     <template slot="append">{{getInputLength(form.author)}}/30</template>
                </el-input>
            </el-form-item>
             <el-form-item label="来源" prop="origin" >
                <el-input v-model="form.origin"  placeholder="请输入来源，（建议14字以内，不超过30个字）" minlength="14" maxlength="30" style="width:550px">
                    <template slot="append">{{getInputLength(form.origin)}}/30</template>
                </el-input>
            </el-form-item>
            <br>
            <el-form-item label="内容分类" prop="contentClassify">
               <el-select clearable v-model="form.contentClassify" placeholder="请选择">
                    <el-option
                    v-for="item in classifies"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
             <el-form-item  label="兴趣标签" prop="tagIds">
                <el-select  multiple v-model="form.tagIds" placeholder="请选择">
                        <el-option
                        v-for="item in Tags"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                        </el-option>
                </el-select>
            </el-form-item>
            <br>
            <el-form-item label="是否置顶" prop="isToTop">
                <el-radio-group v-model="form.isToTops">
                    <el-radio class="radio" :label="1">是</el-radio>
                    &nbsp;&nbsp;&nbsp;
                    <el-radio class="radio" :label="0">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="" prop="topNum">
               <span>排序</span>&nbsp;&nbsp;<el-input-number v-model="form.topNum" size="small" controls-position="right"  :min="1" :max="99"></el-input-number>
            </el-form-item>
            <br>
            <el-form-item label="封面图" prop="cover">
               <el-upload
                    action=""
                    ref="upload"
                    :http-request="uploadSectionFile"
                    list-type="picture"
                    :show-file-list="false"
                    style="width:120px;float:left">
                    <el-button>选择图片</el-button>
                </el-upload>
                <span class="upload_span">750*422像素或16:9，支持PNG、JPG、GIF格式，小于5M</span>
                <el-input type="hidden" v-model="form.cover"></el-input>
                <div style="margin-top:10px" v-if="form.cover != null"><img :src="form.cover" width="200px" height="200px"/></div>
            </el-form-item>
            <el-form-item label="简介" prop="introduction">
                <el-input type="textarea"  placeholder="请输入简介，（建议300字以内）" v-model="form.introduction" :autosize="{ minRows: 4, maxRows: 8 }" minlength="1" maxlength="300" >
                </el-input><br>
                <span class="text" style="float: right;color: #909399;margin-right: 10px;">已输入{{getInputLength(form.introduction)}}字</span>
            </el-form-item>
            <el-form-item label="编辑内容" prop="content">
                <tinymce :height="400" ref="tinyme" style="width:845px;" :id="tinymeId" v-model="form.content"></tinymce>
            </el-form-item>
            <br/>
            <el-form-item>
                <div style="width:550px;margin-left:120px">
                    <el-button @click="onSubmit" class="form_button">提交</el-button>
                    <el-button  @click="back" class="form_button">取消</el-button>
                </div>
            </el-form-item>
        </el-form>
    </el-col>
    <el-col :span="7"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
    </div>
</template>
<script>
import { uploadImg } from '@/api/common/upload'
import Tinymce from '@/components/Tinymce'
import　{ getAllClassifies } from '@/api/sys/classify'
import { getAllColumns } from '@/api/magazine/magazinecolumn'
import { getChildTags} from '@/api/sys/tag'
import {insertMagazineContent, updateMagazineContent, getMagazineContentById} from '@/api/magazine/magazinecontent'

export default {
    components: { Tinymce },
    data() {
      return {
        tinymeId: 'm_conetent',
        form: {
            id:undefined,
            title: undefined,
            author:undefined,
            origin:undefined,
            contentClassify: undefined,
            tagIds:[],
            cover:undefined,
            isToTop:1

        },
        formRules:{
            title: [
                { required: true, message: '标题不能为空', trigger: 'blur' }
            ],
            
            magazineId:[
                { required: true, message: '杂志为必选项', trigger: 'change' }
            ],
            column:[
                { required: true, message: '杂志栏目为必选项', trigger: 'change' }
            ],
            cover:[
                { required: true, message: '封面图必须上传', trigger: 'change' }
            ],
            introduction:[
                { required: true, message: '内容简介不能为空', trigger: 'blur' }
            ],
            content:[
                { required: true, message: '文章内容不能为空', trigger: 'blur' }
            ]
              
        },
        imgData: {
            accept: 'image/gif, image/png, image/jpeg',
        },
        levelOne: [],
        listObj:{},
        options: [{
          value: '0',
          label: '图文'
        }],
        classifies:[],
        Tags:[],
        columns:[],
        tempTags:[],
        magazines:[{
            id:this.$route.query.magazineId,
            name: this.$route.query.period
        }]
      }
    },
    created() {
        this.getMagazineTags()
        this.getMagazineClassify()
        this.getMagazineColumn()
        const contentId = this.$route.query.contentId
        if(contentId !== undefined){
            this.getEditContent(contentId)
        }
    },
    methods: {
        
      onSubmit() {
        this.form.wordCnt = this.$refs.tinyme.getBodyLength()
        this.form.picCnt = this.$refs.tinyme.getImgNumber()
        this.$refs.form.validate((valid) => {
                if (valid) {
                    if(this.form.id === undefined || this.form.id === ''){
                        insertMagazineContent(this.form).then(response => {
                            if(response.code === 0){
                                this.$message({
                                    type: 'success',
                                    message: response.msg
                                })
                                this.back()
                            }
                        })
                    }else{
                        updateMagazineContent(this.form).then(response => {
                            if(response.code === 0){
                                this.$message({
                                    type: 'success',
                                    message: response.msg
                                })
                                this.back()
                            }
                        })
                    }
                }
        })
      },
      getEditContent(contentId){
          getMagazineContentById(contentId).then(response => {
              if(response.code === 0){
                this.form = response.data
                this.magazines[0] = {id:this.form.magazineId,name:this.$route.query.period}
              }
          })
      },
      uploadSectionFile(content){
        let file = content.file 
        const type = file.type;
        if(this.imgData.accept.indexOf(type) == -1){
            this.MessageBox("error","图片格式不正确")
            return
        }
        const size = file.size
        if(size > 5242880){
            this.MessageBox("error","图片不能大于５M")
             return
        }
        let data = new FormData()
        data.append("file",file)
        uploadImg(data).then((response) => {
            if(response.code === 0){
                this.form.cover = response.data
            }
        })
    },
    getMagazineTags(){
        getChildTags().then(response =>{
            if(response.code === 0){
                this.Tags = response.data
            }
        })
    },
    getMagazineClassify(){
        getAllClassifies().then((response) => {
            if (response.code === 0) {
                   this.classifies = response.data
            }
        })
    },
    getMagazineColumn(){
        getAllColumns().then((response) => {
            if (response.code === 0) {
                   this.columns = response.data
            }
        })
    },
    getInputLength(input){
        if(input === undefined) return 0
        const length = input.length
        return length
    },
    back(){
          this.$router.back(-1)
    },
    MessageBox(type,message){
        this.$message({
            type: type,
            message: message
        })
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss">
.go_back{
    margin: 20px;
}

.upload_span{
    margin-left: 10px;
    float: left;
    font-size: 16px;
    color: gray;
}
.free_read_column {
    font-size: 16px;
}
.el-button--text{
    font-size: 16px;
}
.online_set{
    margin: 10px;
}
.form_button{
    width: 120px;
} 
.free_read  .el-table__header-wrapper table{
    display: none;
} 
.inline_cloumn_left{
    width: 50%;
    float: left;
}
.inline_cloumn_right{
    width: 50%;
    float: left;
    position: relative;
    label{
        width: 120px!important;
    }
}
.el-textarea{
    width: 550px!important;
}
</style>
